<template>

  <div style="display: flex; flex-direction: column; align-items: center;">
    <el-table :data="tableData" >
      <el-table-column type="selection" width="55">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checked" @change="handleSelectionChange(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="departmentId" label="系Id">
      </el-table-column>
      <el-table-column >
        <template v-slot="scope">
          <el-button type="primary" @click="goToDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-pagination
        :page-size="pageSize"
        :pager-count="pageNum"
        :total="totalCount"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        >
    </el-pagination>

    <el-form :inline="true">



      <el-form-item>
        <el-button type="primary" @click="PassDepartText" style="background-color: green; border-color: green;">通过勾选</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="RefuseDepartText" style="background-color: green; border-color: green;">拒绝勾选</el-button>
      </el-form-item>
    </el-form>
    <!--    编辑-->
    <el-dialog
        title="系需求详情"
        :visible="dialogVisible"
        @close="dialogVisible = false">
      <el-table :data="detailData" >
        <el-table-column prop="textbookId" label="教材Id" width="140">
        </el-table-column>
        <el-table-column prop="demandNum" label="教材数目" width="120">
        </el-table-column>
        <el-table-column prop="departmentId" label="系Id">
        </el-table-column>

      </el-table>
      <el-pagination
          :page-size="pageSize"
          :pager-count="pageNum"
          :total="detailCount"
          layout="total, prev, pager, next, jumper"
          @current-change="DetailHandleCurrentChange"
          >
      </el-pagination>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  data() {
    return {
      pageSize: 13,
      pageNum: 1,
      totalCount: 0,
      tableData: [],
      detailCount: 0,
      detailData: [],
      selectedIds: [],//记录选中的部门id

      dialogVisible: false, // 控制弹窗显示隐藏
    }
  },

  mounted() {
    this.GetAccessDepart();
  },
  methods: {

    GetAccessDepart() {

      const GetAccessDepartRequest = {

        pageNum:this.pageNum,
        pageSize:this.pageSize,

      }
      request.post("/department/allDemand", GetAccessDepartRequest)
          .then(res => {
            console.log(res.data);

            this.tableData = res.data.data;
            this.totalCount = res.data.data.length;

          })
          .catch(error => {
            console.error("Error fetching data:", error);
          });
    },
    GetDepartText(val) {
      this.dialogVisible = true;


      const GetDepartTextRequest = {
        departmentId: val,

        pageNum:this.pageNum,
        pageSize:this.pageSize,

      }
      request.post("/department/demand", GetDepartTextRequest)
          .then(res => {
            console.log(res.data);
            this.detailData = res.data.data.list;
            console.log(this.detailData);
            this.detailCount = res.data.data.totalCount;

          })
          .catch(error => {
            console.error("Error fetching data:", error);
          });
    },

    PassDepartText() {
      // 发送 access 请求的逻辑
      const PassDepartTextRequest = {
        departmentIds: this.selectedIds,

      }
      request.post("/department/success",PassDepartTextRequest)  // 假设发送 GET 请求到 /access 接口
          .then(res => {
            console.log("Access request successful:", res.data);
            this.GetAccessDepart();
            // 在这里处理返回的数据或者更新组件状态
          })
          .catch(error => {
            console.error("Error sending access request:", error);
          });
    },
    RefuseDepartText() {
      // 发送 access 请求的逻辑
      const RefuseDepartTextRequest = {
        departmentIds: this.selectedIds,

      }
      request.post("/department/reject",RefuseDepartTextRequest)  // 假设发送 GET 请求到 /access 接口
          .then(res => {
            console.log("Access request successful:", res.data);
            this.GetAccessDepart();
            // 在这里处理返回的数据或者更新组件状态
          })
          .catch(error => {
            console.error("Error sending access request:", error);
          });
    },
    showError(str) {
      // 触发错误提示
      Message.error({
        message: str,
        duration: 3000 // 持续时间为3000毫秒（3秒）
      });
    },
    showMsg(str) {
      // 触发错误提示
      Message.error({
        message: str,
        duration: 3000 // 持续时间为3000毫秒（3秒）
      });
    },
    goToDetail(val){
      console.log(val.departmentId);
      this.GetDepartText(val.departmentId);
    },








    handleNumberInput(field) {
      this.form[field] = this.form[field].replace(/\D/g, ''); // 只保留数字字符
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.GetAccessDepart();
    },
    handleSelectionChange(row) {
      console.log(`当前页: ${this.selectedIds}`);
      if (row.checked) {
        // 如果复选框被选中，则将 row 的 ID 加入 selectedIds 数组
        this.selectedIds.push(row.departmentId);  // 假设 row 中有一个 id 属性表示记录的唯一标识
      }
      else {
        // 如果复选框被取消选中，则从 selectedIds 数组中移除该 ID
        const index = this.selectedIds.indexOf(row.departmentId);
        if (index !== -1) {
          this.selectedIds.splice(index, 1);
        }
      }
    },
    DetailHandleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.GetDepartText();
    },

  }
};
</script>
